import { FC } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { LOGIN_PATH } from '@/router';
import { UserOutlined } from '@ant-design/icons';
import { removeToken } from '@/utils/userToken';
import { Button } from 'antd';
import useGetUserInfo from '@/hooks/useGetUserInfo';
import { useDispatch } from 'react-redux';
import { logoutReducer } from '@/store/UserRuder';

const UserInfo: FC = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { username, nickname } = useGetUserInfo();
  const logout = () => {
    dispatch(logoutReducer());
    removeToken();
    navigate(LOGIN_PATH);
  };

  const UserInfo = (
    <>
      <span style={{ color: 'white' }}>
        <UserOutlined />
        {nickname}
      </span>
      <Button type="link" onClick={logout}>
        退出
      </Button>
    </>
  );

  const Login = (
    <>
      <Link to={LOGIN_PATH}>登录</Link>
    </>
  );

  return <>{username ? UserInfo : Login}</>;
};

export default UserInfo;
